<template>
	<view class="gender-modal-wrap">

		<u-popup :show="show_xingbie" :overlay="true" mode="bottom" :closeable="false" :closeOnClickOverlay="true"
			@close="onClose_xingbie" @open="onOpen" :safeAreaInsetBottom="true" round=0>
			<view class="cus-pop-box">
				<view class="pop-title">
					性别
				</view>
				<view class="pop-ctx">
					<view class="xingbie-box">
						<view class="items">
							<view class="item" v-for="(item,index) in xingbie_list" :key="index"
								:class="{select: xingbie_select.value == item.value}" @click="xingbie_select = item">
								{{item.title}}
							</view>
						</view>
					</view>
				</view>
				
				<view class="pop-foot">
					<view class="safe-fixed-bottom">
						<view class="btn flex-center" @click="doPopConfirm_xingbie()">
							确认
						</view>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				//性别
				show_xingbie: false,
				xingbie_select: {},
				xingbie_list: [{
						title: '男',
						value: '1',
					},
					{
						title: '女',
						value: '2',
					},
				],
			}
		},
		watch: {

		},
		methods: {
			init() {
				this.show_xingbie = true;
			},
			doPopConfirm_xingbie() {
				if (!this.xingbie_select.value) {
					this.$alert('请选择性别')
					return
				}
				this.$emit('confirm', this.xingbie_select)
				this.show_xingbie = false;
			},
			onClose_xingbie() {
				this.show_xingbie = false;
			},
			onOpen() {

			},
		},
	}
</script>

<style lang="scss" scoped>
	.cus-pop-box {
		padding-top: 40rpx;

		.pop-title {
			margin-bottom: 30rpx;
			text-align: center;
			font-weight: bold;
			font-size: 28rpx;
			color: #000000;
		}

		.pop-ctx {
			padding: 0 32rpx;

			&.pop-ctx-qudao {
				padding: 0;

				.xingbie-box {
					margin-bottom: calc(96rpx + constant(safe-area-inset-bottom));
					margin-bottom: calc(96rpx + env(safe-area-inset-bottom));
				}
			}

			.xingbie-box {
				margin-bottom: 150rpx;

				.items {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.item {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 334rpx;
						height: 80rpx;
						background: #F8F8F8;
						border-radius: 64rpx 64rpx 64rpx 64rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;


						&.select {
							color: #fff;
							background: #CB0011;
						}
					}
				}
			}

		}

		.pop-foot {
			.btn {
				width: 100%;
				height: 80rpx;
				background: #CB0011;
				border-radius: 64rpx 64rpx 64rpx 64rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
</style>